<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品销量</th>
  </tr>
</table>

<script>

let p = {};
p.name = "张学友";
p.age = 18;
p.run = function () {
  console.log(p.name+":"+p.age)
}
p.run();

let p2 = {
  name:"李白",
  age:20,
  run:function (){
    console.log(this.name+"."+this.age);
  }
}
p2.run();

let arr = [{title:"小米手机",price:5000,saleCount:200},
  {title:"李宁篮球鞋",price:500,saleCount:100},
  {title:"华为电视",price:4000,saleCount:20},
  {title:"苹果14Pro max",price:10000,saleCount:2}];
let table = document.querySelector("table");
for (let product of arr){
  let tr = document.createElement("tr");
  let titleTd = document.createElement("td");
  let priceTd = document.createElement("td");
  let saleCountTd = document.createElement("td");
  titleTd.innerText = product.title;
  priceTd.innerText = product.price;
  saleCountTd.innerText = product.saleCount;
  tr.append(titleTd,priceTd,saleCountTd);
  table.append(tr);
}
</script>
</body>
</html>